<template>
    <div class="video-container">
        <div class="video-wrapper">
            <VideoView :videoUrl="address.minioUrl+'video/'+video.videoUrl"></VideoView>
        </div>

        <div class="close-button">
            <el-icon @click="emits('close-video')" class="close-icon"><CloseBold /></el-icon>
        </div>

        <div class="action-buttons">
            <div class="avatar-container">
                <img :src="address.minioUrl+'image/'+videoUserInfo?.avatar" class="avator">
                <div v-if="!videoUserInfo?.followed" class="plus-button-container">
                    <el-button :disabled="buttonDisable" link @click="followedAuthor()">
                        <el-icon style="font-size: 25px;color: yellow;"><Plus /></el-icon>
                    </el-button>
                </div>
            </div>

            <div class="follow-button-container" v-if="!videoUserInfo?.followed">
                <el-button :disabled="buttonDisable" link @click="followedAuthor()">关注</el-button>
            </div>

            <div>
                <el-button @click="videoUserInfo?.liked? unLoveVideo():loveVideo()" :disabled="buttonDisable" link class="love">{{videoUserInfo?.liked?'💗':'🤍'}}</el-button>
            </div>
            <div style="width: 56px;"><div style="text-align: center;">{{videoUserInfo?.likeCount}}</div></div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, onMounted, watch,defineProps,defineEmits } from 'vue'
    import { address } from '@/base/address'
    import VideoView from '@/components/video/video.vue'
    import VideoUserInfo from '@/types/user/VideoUserInfo'
    import request from '@/base/request';
    import { ElMessage } from 'element-plus';
    const props=defineProps(['video'])
    const emits=defineEmits(['close-video'])

    const videoUserInfo=ref<VideoUserInfo>()
    const buttonDisable=ref(false)

    const loveVideo=async ()=>{
        buttonDisable.value=true;
        try{
            const response = (await request.post(`/user/userVideoLiked/loveVideo?videoId=${props.video.id}`)).data
            if(response.code==200){
                ElMessage.success("点赞成功")
                await getVideoUserInfo()
            }else{
                ElMessage.error(response.msg)
            }
        }finally{
            buttonDisable.value=false;
        }

    }

    const unLoveVideo=async ()=>{
        buttonDisable.value=true;
        try{
            const response = (await request.delete(`/user/userVideoLiked/unLoveVideo?videoId=${props.video.id}`)).data
            if(response.code==200){
                ElMessage.success("取消点赞成功")
                await getVideoUserInfo()
            }else{
                ElMessage.error(response.msg)
            }
        }finally{
            buttonDisable.value=false;
        }

    }

    const followedAuthor=async ()=>{
        try{
            const response = (await request.post(`/user/userFollowed/followedAuthor?authorId=${props.video.authorId}`)).data
            if(response.code==200){
                ElMessage.success("关注成功")
                await getVideoUserInfo()
            }else{
                ElMessage.error(response.msg)
            }
        }finally{
            buttonDisable.value=false;
        }

    }


    const getVideoUserInfo=async ()=>{
        const response = (await request.get(`/user/userVideoLiked/getVideoUserInfo?authorId=${props.video.authorId}&videoId=${props.video.id}`)).data
        if(response.code==200){
            videoUserInfo.value=response.data
        }else{
            ElMessage.error(response.msg)
        }
    }


    onMounted(()=>{
        getVideoUserInfo();
    })
</script>


<style scoped>
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
}

.video-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-button {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1001;
}

.action-buttons {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}

.close-icon{
    font-size: 40px;
    color: rgb(152, 152, 152);
    cursor: pointer;
}

.close-icon:hover{
    color: rgb(0, 0, 0)
}

.avatar-container {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
}

.avator {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.plus-button-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 0;
}

.follow-button-container {
    margin-top: 5px;
    text-align: center;
}

.love{
    font-size: 30px;
    margin-left: 5px;
    cursor: pointer;
    opacity: 0.6;
}

.love:hover{
    opacity: 1;
}
</style>







